import React, { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';

const RootLayout = lazy(() => import('@/app/layout'));
const RootPage = lazy(() => import('@/app/page'));
const RootErrorBoundary = lazy(() => import('@/app/root-error-boundary/page'));
const NoMatchPage = lazy(() => import('@/app/no-match/page'));

const HomePage = lazy(() => import('@/app/home/page'));
const MobxPage = lazy(() => import('@/app/mobx-demo/page'));
const BadPage = lazy(() => import('@/app/usecontext-bad-demo/page'));
const GoodPage = lazy(() => import('@/app/usecontext-good-demo/page'));
// redux-thunk
const ThunkLayout = lazy(() => import('@/app/redux-thunk-demo/layout'));
const ThunkPage = lazy(() => import('@/app/redux-thunk-demo/page'));
// redux-saga
const SagaLayout = lazy(() => import('@/app/redux-saga-demo/layout'));
const SagePage = lazy(() => import('@/app/redux-saga-demo/page'));
// dva
const DvaLayout = lazy(() => import('@/app/dva-demo/layout'));
const DvaPage = lazy(() => import('@/app/dva-demo/page'));

const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <Suspense fallback={<>...</>}>
                <RootLayout />
            </Suspense>
        ),
        errorElement: (
            <Suspense fallback={<>...</>}>
                <RootErrorBoundary />
            </Suspense>
        ),
        children: [
            {
                index: true,
                element: (
                    <Suspense fallback={<>...</>}>
                        <RootPage />
                    </Suspense>
                ),
            },
            {
                path: 'home',
                element: (
                    <Suspense fallback={<>...</>}>
                        <HomePage />
                    </Suspense>
                ),
            },
            {
                path: 'usecontextbaddemo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <BadPage />
                    </Suspense>
                ),
            },
            {
                path: 'usecontextgooddemo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <GoodPage />
                    </Suspense>
                ),
            },
            {
                path: 'reduxthunkdemo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <ThunkLayout />
                    </Suspense>
                ),
                children: [
                    {
                        index: true,
                        element: (
                            <Suspense fallback={<>...</>}>
                                <ThunkPage />
                            </Suspense>
                        ),
                    },
                ],
            },
            {
                path: 'dvademo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <DvaLayout />
                    </Suspense>
                ),
                children: [
                    {
                        index: true,
                        element: (
                            <Suspense fallback={<>...</>}>
                                <DvaPage />
                            </Suspense>
                        ),
                    },
                ],
            },
            {
                path: 'reduxsagademo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <SagaLayout />
                    </Suspense>
                ),
                children: [
                    {
                        index: true,
                        element: (
                            <Suspense fallback={<>...</>}>
                                <SagePage />
                            </Suspense>
                        ),
                    },
                ],
            },
            {
                path: 'mobxdemo',
                element: (
                    <Suspense fallback={<>...</>}>
                        <MobxPage />
                    </Suspense>
                ),
            },
        ],
    },
    {
        path: '*',
        element: (
            <Suspense fallback={<>...</>}>
                <NoMatchPage />
            </Suspense>
        ),
    },
]);
if (import.meta.hot) {
    console.log('import.meta.hot');
    import.meta.hot.dispose(() => router.dispose());
}
if (import.meta.webpackHot) {
    // 使 action 和 mutation 成为可热重载模块
    console.log('import.meta.webpackHot');
    import.meta.webpackHot.dispose(() => router.dispose());
    // import.meta.webpackHot.accept([], () => {});
}
if ((module as any).hot) {
    console.log('module.hot');
    (module as any).hot.dispose(() => router.dispose());
}

export default router;
